<template>
  <view>
    <view class="search-box">
      <uni-search-bar @input="input" :radius="100" :focus="true" cancelButton="none" bgColor="#FFFFFF"></uni-search-bar>
    </view>
    <!-- 搜索建议 -->
    <view class="sugg-list" v-if="searchResults.length !== 0">
      <unicloud-db :where="where" v-slot:default="{data, loading, error, options}" collection="expense">
        <view v-if="error">{{error.message}}</view>
        <view v-else>
          <view class="sugg-item" v-for="item in data" :key="i" @click="gotoDetail(item)">
            <view class="item-name">{{item.name}}</view>
            <uni-icons type="arrowright" size="16"></uni-icons>
          </view>
        </view>
      </unicloud-db>

    </view>
    <!-- 搜索历史 -->
    <view class="history-box" v-else>
      <!-- 标题区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
      </view>
      <!-- 列表区域 -->
      <view class="history-list">
        <uni-tag :text="item" v-for="(item, i) in historyList" :key="i" :inverted="true"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        kw: '',
        searchResults: [],
        historyList: ['a', 'app', 'apple'],

      };
    },
    computed: {
      where() {
        return `${new RegExp(this.kw, 'i')}.test(name)` // 使用计算属性得到完整where
      }
    },
    methods: {
      input(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = e
          this.getSearchList()
        }, 500)
      },
      getSearchList() {
        if (this.kw === '') {
          this.searchResults = []
          return
        }
        this.searchResults = [{
            cid: 1,
            name: '红绕肉'
          }, {
            cid: 1,
            name: '红绕肉'
          }, {
            cid: 1,
            name: '红绕肉'
          },
          {
            cid: 1,
            name: '红绕肉给我吃给我吃给我吃给我吃给我吃给我吃给我吃给我吃给我吃给我吃给我吃给我吃'
          }
        ]
      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/buy/buy?cid=' + item.cid
        })
      },
      cleanHistory() {
        this.historyList = []

        // uni.setStorageSync('kw', '[]')
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-list {
    padding: 0 5px;

    .sugg-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      padding: 13px 0;
      border-bottom: 1px solid #efefef;


      .item-name {
        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
        margin-right: 3px;
      }
    }

  }

  .history-box {
    padding: 0 5px;

    .history-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 35px;
      font-size: 13px;
      border-bottom: 1px solid #d1d1d1;
      margin-bottom: 20rpx;
    }

    .history-list {
      display: flex;
      flex-wrap: wrap;

      .uni-tag {
        margin-top: 5px;
        margin-right: 5px;
      }
    }
  }
</style>
